@import "../theming/theming";
@import "checkbox";

@mixin lgn-checkbox-theme() {
  @include lgn-checkbox-color();
}

@mixin lgn-checkbox-color() {
  input[type="checkbox"] {
    position: absolute;
    top: 4px;
    left: 0;
    width: 16px;
    height: 16px;
    opacity: 0;
    z-index: 0;
  }

  // Unchecked
  .lgn-checkbox label {
    &:before {
      background-color: transparent;
      border: 2px solid var(--zitadel-color-input-border);
    }

    &:after {
      border-bottom: 2px solid transparent;
      border-right: 2px solid transparent;
      background: transparent;
    }
  }

  // Checked
  input[type="checkbox"]:checked + label {
    &:before {
      background-color: var(--zitadel-color-primary);
      border-color: var(--zitadel-color-primary);
    }

    &:after {
      border-color: var(--zitadel-color-primary-contrast);
    }
  }
}
